<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>批量静态化</title>

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" SRC="/js/jquery.uploadify.min.js"></script>
<script type="text/javascript" SRC="/js/swfobject.js"></script>
<script type="text/javascript" SRC="/js/jquery-ui.js"></script>
<script type="text/javascript">
var count = 0;
var page = 0;
var pageSize = 10;
var num = 0;
$(function(){
	count = $("#count").val();	
	page = 0;	
	$("#static_html").click(function(){
		page = 1;
		num = 0;
		pageSize = $("#pageSize").val();
		$("#pageSize").attr("readonly","true").addClass("readonly");
		
		loop();
	});
	
});

function loop(){
	setTimeout(function(){
		$.ajax({
			url:"/default/html/batch-to-html",
			data: {"page":page,"pageSize":pageSize},
			type:'post',
			dataType:'json',
			async:false,
			success:function(json){
				page++;
				var maxWidth = $("#progressBar").width();
				var progress = page*pageSize/count;
				progress = parseInt(progress*100)/100*maxWidth;
				progress = progress>maxWidth?maxWidth:progress;
				//alert(progress);
				$("#progressInner").width(progress+"px");
				$("#progressMsg").html((progress*100/maxWidth)+"%");
				var left = count - page*pageSize;
				left = left<=0?0:left;
				$("#left").text(left);
				if(json.status==1){
					$.each(json.data,function(i,v){
						num++;
						$("#fileQueue").prepend("<p><b>"+num+"：</b>"+v+"</p>");
						if(num%99==0){
							$("#fileQueue").html("");
						}
					});
					loop();
				}else{
					if(json.msg){
						tip(json.msg);
					}else{
						$("#pageSize").attr("readonly",false).removeClass("readonly");
						$("#fileQueue").html("<p><b>所有静态化完成</b></p>");
						tip("所有静态化完成");
					}
				}
				
			}
		});
	},500);
}

function tip(tip){
	$('<div title="提示"><p align="left">'+tip+'</p></div>').dialog({
		modal : true,
		width : 200,
		buttons : {
			'确定' : function(){
				$(this).dialog("close");
			}
		}
	});
	
}
</script>

<link rel="stylesheet" href="/css/uploadify.css" type="text/css" />
<link rel="stylesheet" href="/css/blitzer/jquery-ui.css" type="text/css" />
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	font-size: 12px;
	line-height: 25px;
}

#loginBox {
	width: 300px;
	border: 1px solid #ccc;
	background: #FFF;
}

h1 {
	height: 35px;
	line-height: 35px;
	background: #e8e8e8;
	font-size: 14px;
	border-bottom: 1px solid #ccc;
	text-indent: 5px;
}

input.name,input.code {
	width: 150px;
	height: 25px;
	border: 1px solid #ccc;
	margin: 0 0 0 0px;
	padding: 0 0 0 20px;
}

input.verifyCode {
	height: 25px;
	width: 75px;
	border: 1px solid #ccc;
}

input.name {
	background: url("../../../images/login-username.gif") no-repeat left
		center;
}

input.code {
	background: url("../../../images/login-password.gif") no-repeat left
		center;
}

input.loginBtn,input.registerBtn {
	width: 54px;
	height: 21px;
	border: none;
	margin: 5px;
}

input.loginBtn {
	background: url("../../../images/login-btn.gif") no-repeat;
}

html,body {
	/*background: url("../images/background-top.png") no-repeat scroll 0 0 #318DAC;*/
	border: 0px solid #333333;
	color: #333333;
	font: 12px/150% Arial, Helvetica, sans-serif, '宋体';
	margin: 0;
	padding: 0;
	font-family: Arial, Tahoma, Verdana, sans-serif;
	font-size: 12px;
}

.logo {
	background: url("../../../images/logo.png") no-repeat scroll left top
		transparent;
	height: 70px;
	left: 10px;
	position: absolute;
	top: 10px;
	width: 170px;
}

.header {
	height: 88px;
	margin-top: auto;
	padding: 0 10px;
	position: relative;
	background: url("../../../images/background-top.png") no-repeat 0 0
		#318DAC;
}

#uploadFileDiv {
	height: 50px;
	overflow: hidden;
}

#fileQueue {
	width: 500px;
	padding:10px;
	max-height:220px;
	overflow:hidden;
}

.imgWrap {
	padding: 2px;
	border: 1px solid #ccc;
	float: left;
	margin-left: 10px;
	margin-top: 10px;
}
#progressBar{border:1px solid #ccc;width:500px;height:20px;clear:both;margin-left:10px;position:relative;}
#progressInner{background:red;width:0%;height:20px;}
#progressMsg{width:100%;text-align:center;color:#000;font-weight:bold;position:absolute;left:0;top:0;}
#left{color:red;padding:0 5px;font-weight:bold;font-size:14px;}
.readonly{background:#eee;border:1px solid #ccc;padding:2px 5px;}
</style>
</head>
<body>
	<div class="header">
		<div class="logo" title="China Fullfill"></div>
	</div>
	<div style="margin-top: 0; text-align: center">
		<form name="login" id="loginForm" method="post"
			action="/default/upload/upload" enctype="multipart/form-data">
			<div id="loginBox"
				style="text-align: left; width: 99%; margin: 0 auto;">
				<h1>批量静态化</h1>


				<div style="width: 600px; float: left; padding: 10px;">
					PageSize：<input id="pageSize" type="text" value="20" size="5"/>
					&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" id="static_html" class="half" value="开始静态化"
						name="static_html" style="" />
						&nbsp;&nbsp;&nbsp;&nbsp;总共：<b><?php echo $this->count ?></b>条记录需要静态化，还剩余未静态<b id="left"><?php echo $this->count ?></b>条！！
				</div>
				<input id="count" type="hidden" value="<?php echo $this->count ?>"/>
				<div id="progressBar">
					<div id="progressInner"></div>
					<div id="progressMsg">0%</div>
				</div>
				<div id="fileQueue">
				
				</div>				
			</div>
		</form>
	</div>

</body>
</html>
